<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">通用大数据框架智能计算引擎优化仿真平台</el-breadcrumb-item>
    <el-breadcrumb-item>计算任务</el-breadcrumb-item>
    <el-breadcrumb-item>计算详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getCalculateProgressList">
          <el-button slot="append" icon="el-icon-search" @click="getCalculateProgressList"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
        :data="calculateProgressList"
        border
        style="width: 100%">

      <el-table-column
          prop="calculatename"
          label="任务名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="starttime"
          label="开始时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="timeconsuming"
          label="耗时"
          width="100">
      </el-table-column>
      <el-table-column
          prop="progress"
          label="进度"
          width="100">
      </el-table-column>
      <el-table-column
          prop="optimizescheme"
          label="优化方案"
          width="150">
      </el-table-column>
      <el-table-column
          prop="comparisontask"
          label="所属对比任务"
          width="200">
      </el-table-column>


      <el-table-column
          prop="operate"
          label="操作"
          width="360">
        <template v-slot="scope">
          <el-tooltip class="item" effect="dark" content="开始" placement="top">
            <el-button v-if="scope.row.status== false"  icon="el-icon-video-play"  type="primary"
            @click="changeStatus(scope.row)">开始</el-button>
            <el-button v-if="scope.row.status== true"  icon= "el-icon-video-pause" type="warning"
                       @click="changeStatus(scope.row)"
            >暂停</el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit"  @click="editCalculateProgress(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="removeCalculateProgress(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10,20,30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </el-card>
    <el-dialog
        title="编辑计算任务"
        :visible.sync="editCalculateProgressVisble"
        width="30%"

    >

      <el-form :model=" editCalculateProgressParams" :rules="editCalculateProgressFormRul"
               ref="editCalculateProgressFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="计算任务名称" prop="calculatename" >
          <el-input v-model="editCalculateProgressParams.calculatename"  ></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
     <el-button @click="editCalculateProgressVisble = false">取 消</el-button>
     <el-button type="primary" @click="editCalculateProgressSubmit">确 定</el-button>
     </span>
    </el-dialog>


</div>
</template>
<script>
export default {
  data(){
    return{
      queryInfo:{
        //查询参数
        query:'',
        pagenum:1,
        pagesize:10
      },
      editCalculateProgressFormRul:{   calculatename:[
          { required: true, message: '请输入文件名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],},


      calculateProgressList:[],
      editCalculateProgressParams:{},
      total:0,
      editCalculateProgressVisble:false,
      calculateProgressListtest:[
        { calculateid:'01',
          calculatename:'计算任务001',
          starttime:'2022/2/20 10:10',
          timeconsuming:'1h',
          progress:'30%',
          optimizescheme:'默认优化',
          comparisontask:'001',
          status:false

        },
        { calculateid:'02',
          calculatename:'计算任务001',
          starttime:'2022/2/20 10:10',
          timeconsuming:'1h',
          progress:'30%',
          optimizescheme:'默认优化',
          comparisontask:'002',
          status:true
        }
      ]
    }
  },
  methods:{
    SizeChange(newsize){
      this.queryInfo.pagesize = newsize
      this. getoptimizeSchemeList()
    },
    CurrentChange(newnumber){
      this.queryInfo.pagenum = newnumber
      this. getoptimizeSchemeList()
    },
    getCalculateProgressList(){
      this.$http.get('/',{params:this.queryInfo}).then(res=>{
        console.log(res)
        this.calculateProgressList = this.calculateProgressListtest
        // if(res.data.meta.status !== 200)
        // return this.$message.error('请求任务详情列表失败')
        // this.calculateProgressList = res.data.data.calculateProgressList
        // this.total = res.data.data.total
        this.total = 0
      })

    },
    editCalculateProgressSubmit(){
      this.$http.put(`/${this.editCalculateProgressParams.calculateid}`,this. editCalculateProgressParams).then(res=>{
        if(res.data.meta.status !== 200) return this.$message.error('更新失败')
        this.getCalculateProgressList()
      })
    },
    changeStatus(row){
      this.$http.put(`/${row.calculateid}`,row.status = ! row.status).then(res=>{
        if(res.data.meta.status !== 200) {
          row.status = !row.status
          return this.$message.error('更新状态失败')
        } else {
          this.getCalculateProgressList()
        }



      }

      )

      // for (let i = 0; i < this.calculateProgressList.length; i++) {
      //   if(this.calculateProgressList[i].calculateid === row.calculateid){
      //
      //    this.calculateProgressList[i].status = !this.calculateProgressList[i].status
      //   }
      // }
    },
    editCalculateProgress(row){
      this.editCalculateProgressParams = row
      this.editCalculateProgressVisble = true
    },
    removeCalculateProgress(row){
      this.$confirm('此操作将永久删除'+row.calculatename+', 是否继续?', '删除计算进度', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/${row.calculateid}`).then(res=>{
          if(res.data.meta.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getCalculateProgressList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },

  created() {
    this.getCalculateProgressList()
  }
}

</script>
<style>

</style>
